<template>
  <el-form ref="form" :model="model" :rules="rules" class="z-form">
    <template v-for="input in inputs">
      <z-form-item :key="input.name" class="form-class-item" :input="input"> </z-form-item>
    </template>
  </el-form>
</template>

<script>
import ZFormItem from "./ZFormItem";

export default {
  name: "ZForm",
  components: {
    ZFormItem,
  },
  props: {
    inputs: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    model({ inputs }) {
      return inputs.reduce((model, { name, value }) => Object.assign(model, { [name]: value }), {});
    },
    rules({ inputs }) {
      return inputs
        .filter((input) => input.rules)
        .reduce((values, { name, rules }) => {
          return Object.assign(values, { [name]: [].concat(rules) });
        }, {});
    },
  },
  methods: {
    validate(callback) {
      return this.$refs.form.validate(callback);
    },
  },
};
</script>
<style lang="scss" scoped>
.z-form {
  display: flex;
  flex-wrap: wrap;

  ::v-deep .el-form-item__content {
    line-height: unset;
  }
}

.form-class-item {
  margin-bottom: 28px;
}
</style>
